<template>
	<div class="login_container">
		<div class="login_logo">
			<img />
		</div>
		<div class="login_box">
			<!-- 登录表单区域 -->
			<el-tabs :stretch="true">
				<el-tab-pane label="账号密码登录">
					<!-- 账号密码登录表单 -->
					<el-form ref="pwdLoginFormRef" :model="pwdLoginForm" :rules="pwdLoginFormRules">
						<!-- 用户名 -->
						<el-form-item prop="username">
							<el-input placeholder="用户名/邮箱/手机号" clearable prefix-icon="el-icon-user-solid
" v-model="pwdLoginForm.username">
							</el-input>
						</el-form-item>
						<!-- 密码 -->
						<el-form-item prop="password">
							<el-input placeholder="密码" type="password" show-password prefix-icon="el-icon-lock"
								v-model="pwdLoginForm.password">
							</el-input>
						</el-form-item>
						<!-- 按钮区域 -->
						<el-form-item class="login_btns">
							<el-button type="primary" @click="pwdLogin" :loading="loading">登录</el-button>
							<el-button type="primary" @click='toRegister'>注册</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane class="title_color" label="邮箱验证登录">
					<!-- 邮箱验证登录表单 -->
					<el-form ref="emailLoginFormRef" :model="emailLoginForm" :rules="emailLoginFormRules">
						<!-- 邮箱 -->
						<el-form-item prop="email">
							<el-input placeholder="邮箱" clearable prefix-icon="el-icon-message"
								v-model="emailLoginForm.email">
							</el-input>
						</el-form-item>
						<!-- 邮箱验证码 -->
						<el-form-item prop="emailCode">
							<el-input placeholder="验证码" prefix-icon="el-icon-key" v-model="emailLoginForm.emailCode">
								<template #append>
									<el-button :disabled="disabled" @click="getEmailValidateCode" class="yzm">{{buttonText}}
									</el-button>
								</template>
							</el-input>
						</el-form-item>
						<!-- 按钮区域 -->
						<el-form-item class="login_btns">
							<el-button type="primary" @click="emailLogin">登录</el-button>
							<el-button type="primary" @click='toRegister'>注册</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<!-- <el-tab-pane label="手机验证登录"> -->
				<!-- 手机验证登录表单 -->
				<!-- <el-form ref="phoneLoginFormRef" :model="phoneLoginForm" :rules="phoneLoginFormRules"> -->
				<!-- 手机号 -->
				<!-- <el-form-item prop="phone">
              <el-input placeholder="手机号" clearable prefix-icon="el-icon-phone" v-model="phoneLoginForm.phone">
              </el-input>
            </el-form-item> -->
				<!-- 手机验证码 -->
				<!-- <el-form-item prop="phoneCode">
              <el-input placeholder="验证码" prefix-icon="el-icon-key" v-model="phoneLoginForm.phoneCode">
                <template #append>
                  <el-button>获取验证码</el-button>
                </template>
              </el-input>
            </el-form-item> -->
				<!-- 按钮区域 -->
				<!-- <el-form-item class="login_btns">
              <el-button type="primary" @click="phoneLogin">登录</el-button>
              <el-button type="success" @click='toRegister'>注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane> -->
			</el-tabs>
		</div>
		<div class="login_footer">
			登录即表示您已阅读并同意
			<a class="login_footer2" href="#" style="color: black;">服务条款</a>
		</div>
	</div>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue'
	import qs from 'qs'
	import axios from 'axios'
	import {
		useRouter
	} from 'vue-router'
	export default {
		setup() {
			// 验证邮箱的规则
			var checkEmail = (rule, value, cb) => {
				// 验证邮箱的正则表达式
				const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
				if (regEmail.test(value)) {
					// 合法的邮箱
					return cb()
				}
				cb(new Error('请输入合法的邮箱'))
			}
			// // 验证手机号的规则
			// var checkMobile = (rule, value, cb) => {
			//   // 验证手机号的正则表达式
			//   const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
			//   if (regMobile.test(value)) {
			//     return cb()
			//   }
			//   cb(new Error('请输入合法的手机号'))
			// }
			const {
				proxy
			} = getCurrentInstance()
			const router = useRouter()
			const pwdLoginFormRef = ref(null)
			const emailLoginFormRef = ref(null)
			// const phoneLoginFormRef = ref(null)
			const truePwd = {
				username: 'admin',
				password: '123456'
			}
			const state = reactive({
				pwdLoginForm: {
					username: 'admin',
					password: '123456'
				},
				emailLoginForm: {
					email: '2954510949@qq.com',
					emailCode: ''
				},
				// phoneLoginForm: {
				//   phone: '15802860413',
				//   phoneCode: ''
				// },
				pwdLoginFormRules: {
					username: [{
						required: true,
						message: '请输入你的账号',
						trigger: 'blur'
					}],
					// 验证密码是否合法
					password: [{
						required: true,
						message: '请输入你的密码',
						trigger: 'blur'
					}]
				},
				emailLoginFormRules: {
					email: [{
							required: true,
							message: '请输入你的邮箱',
							trigger: 'blur'
						},
						{
							validator: checkEmail,
							trigger: 'blur'
						}
					],
					emailCode: [{
						required: true,
						message: '请输入你获取到的验证码',
						trigger: 'blur'
					}]
				},
				// phoneLoginFormRules: {
				//   phone: [{
				//       required: true,
				//       message: '请输入你的手机号',
				//       trigger: 'blur'
				//     },
				//     {
				//       validator: checkMobile,
				//       trigger: 'blur'
				//     }
				//   ],
				//   phoneCode: [{
				//     required: true,
				//     message: '请输入你获取到的验证码',
				//     trigger: 'blur'
				//   }]
				// },
				loading: false,
				// 控制获取验证码
				buttonText: '获取验证码',
				disabled: false,
				duration: 60,
				timer: null
			})
			// 账号密码登录
			const pwdLogin = async () => {
				state.loading = true
				const obj = { //提交参数
					username: state.pwdLoginForm.username,
					password: state.pwdLoginForm.password
				}
				console.log(obj) //获取用户输入的密码
				try { //qs.json转为表单
					// 向后端请求 
					// const res = await new proxy.$request(proxy.$urls.m().pwdLogin, qs.stringify(obj)).modepost()

					// if (res.data.success != true) {
					if (obj.username != "admin" && obj.password != "123456") {
						// new proxy.$tips(res.data.message, 'warning').mess_age()
						new proxy.$tips('密码或用户名错误', 'warning').mess_age()
					} else {
						// new proxy.$tips(res.data.message, 'success').mess_age()
						new proxy.$tips('登录成功', 'success').mess_age()
						router.push({
							path: '/homepage'
						})
						// localStorage.setItem('token', res.data.data.token)
						// 成功跳转页面
					}
					state.loading = false
				} catch (e) {
					state.loading = false
					new proxy.$tips('服务器发生错误', 'error').mess_age()
					// router.push({
					// 	path: '/homepage'
					// })
				}
			}
			// 获取邮箱验证码
			const getEmailValidateCode = () => {
				const obj = {
					email: state.emailLoginForm.email
				}
				axios.post('http://back.cduestc.cc:8081/login/getEmailValidateCode', qs.stringify(obj)).then(
					res => {
						if (res.data.success != true) {
							new proxy.$tips(res.data.message, 'warning').mess_age()
						} else {
							console.log(res.data)
							console.log(res.headers)
							new proxy.$tips(res.data.message, 'success').mess_age()
							// localStorage.setItem('token', res.data.data.token)
							state.timer = setInterval(() => {
								state.disabled = true
								const tmp = state.duration--
								state.buttonText = `${tmp}秒后重新获取`
								if (tmp <= 0) {
									clearInterval(state.timer)
									state.duration = 60
									state.buttonText = '重新获取验证码'
									state.disabled = false
								}
							}, 1000)
						}
					})
			}
			// 邮箱验证登录
			const emailLogin = async () => {
				state.loading = true
				const obj = {
					email: state.emailLoginForm.email,
					emailValidateCode: state.emailLoginForm.emailCode,
					// token: localStorage.getItem('token')
				}
				try {
					const res = await new proxy.$request(proxy.$urls.m().emailLogin, qs.stringify(obj)).modepost()
					if (res.data.success != true) {
						new proxy.$tips(res.data.message, 'warning').mess_age()
					} else {
						new proxy.$tips(res.data.message, 'success').mess_age()
						localStorage.setItem('token', res.data.data.token)
						// 成功跳转页面
					}
					state.loading = false
				} catch (e) {
					state.loading = false
					new proxy.$tips('服务器发生错误', 'error').mess_age()
				}
			}
			// 手机号验证登录
			// const phoneLogin = async () => {
			//   const obj = {
			//     phone: state.phoneLoginForm.phone,
			//     phoneCode: state.phoneLoginForm.phoneCode
			//   }
			// }
			const toRegister = () => {
				router.push({
					path: '/register'
				})
			}
			return {
				...toRefs(state),
				pwdLoginFormRef,
				emailLoginFormRef,
				// phoneLoginFormRef,
				pwdLogin,
				getEmailValidateCode,
				emailLogin,
				// phoneLogin,
				toRegister
			}
		}
	}
</script>

<style lang="less" scoped>
	.login_container {
		width: 100%;
		height: 100%;
		background: url(../assets/登录页面背景图.png);
		position: fixed;
		background-size: 100% 100%;
	}

	.login_box {
		width: 395px;
		height: 435px;
		border-radius: 5px;
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.login_btns {
		text-align: center;
	}


	.login_footer {
		color: #6a6a6a;
		font-size: 13px;
		position: absolute;
		left: 50%;
		top: 70%;
		transform: translate(-50%, -50%);
		border: 1px solid rgba(203, 238, 238, 0.2);
		width: 395px;
		height: 20px;
		text-align: center;
		background-color: rgba(203, 238, 238, 0.2);

		a {
			text-decoration: none;
		}
	}
</style>
<style scoped>
	.login_box {
		backdrop-filter: blur(15px);
		box-shadow: 0 0 5px #ebffff;
	}

	.el-tabs>>>.el-tabs__header {
		padding: 5% 10% 0 10%;
	}

	.el-tabs>>>.el-tabs__item:hover {
		color: rgb(17, 48, 91);
		font-weight: 600;
		cursor: pointer;
	}

	.el-tabs>>>.el-tabs__item.is-active {
		color: #050006;
		font-weight: 600;
	}

	.el-form {
		text-align: center;
	}

	.el-form-item>>>.el-form-item__error {
		left: 10%;
	}

	.el-form-item {
		margin-top: 6%;
	}

	.el-input {
		width: 80%;
		--el-input-font-color: black;
	}

	.el-input>>>.el-input__inner {
		background-color: #c8f1ff !important;
	}

	.el-button {
		border-radius: 10px;
		margin-top: 6%;
		background-color: #008aca;
		border: none;
		color: rgb(31, 171, 137);
	}

	.el-button--primary {
		--el-button-font-color: #409e40;
		--el-button-background-color: #ffffff;
		--el-button-border-color: #409eff;
		--el-button-hover-color: #66b1ff;
		--el-button-active-font-color: #e6e6e6;
		--el-button-active-background-color: #0d84ff;
		--el-button-active-border-color: #0d84ff;
	}

	.yzm {
		color: rgb(31, 171, 137);
	}
</style>
